/*sAWc/+o89mfVHRcNAsUTUk3nvOgSXdiDeTIvkujo5jTQnguuhOFG5GuVbuibWzlV*/
/**
 * Created by liqiankun on 2018/7/31.
 * 会计期间；日期的组件
 */


import React, {Component} from 'react';
import {base, getMultiLang} from 'nc-lightapp-front';
import ReferLoader from '../../../public/ReferLoader/index.js';

const {
    NCRadio:Radio, NCRow: Row, NCCol: Col,
    NCRangePicker: RangePicker,
    NCRangePickerClient
} = base;


import { accountPeriodChange, renderMiddleTxt } from "./modules";
const format = 'YYYY-MM-DD';

import '../../css/searchModal/index.less';
import '../../../public/reportcss/searchmodalpage.less'
import { radioStyle_28, voucherHeightConfig } from '../../../export/pub/tinperNext/index.js';
import FormLabel from '../../../public/components/FormLabel';

class DateGroup extends Component{
    constructor(props){
        super(props);
        this.state = {
            json: {}
        }
    }
    componentWillMount() {
        let callback= (json) =>{
            this.setState({
                json:json,
            },()=>{
                // initTemplate.call(this, this.props);
            })
        }
        getMultiLang({moduleId:'dategroup',domainName:'gl',currentLocale:'simpchn',callback});
    }
    renderPeriodRefer = (type) => {
        let referUrl = 'uapbd/refer/pubinfo/AccPeriodDefaultTreeGridRef' + '/index.js';
        let {self, selectionState, pk_accperiodscheme, pk_accountingbook} = this.props
		return(
            <div className='comp-width'>
                <ReferLoader
                    tag = {`${type}date`}
                    fieldid = {type}
                    refcode = {referUrl}
                    disabled = {selectionState === 'true' ? false : true}
                    value = {this.props[type]}
                    queryCondition = {() => {
                        let queryCondition = {
                            "pk_accperiodscheme": pk_accperiodscheme,
                            "GridRefActionExt": "nccloud.web.gl.ref.AccperiodGridRefSqlBuilder",
                            "TreeRefActionExt": "nccloud.web.gl.ref.AccperiodTreeRefSqlBuilder",
                            "pk_accountingbook": pk_accountingbook && (pk_accountingbook.pk_accountingbook || pk_accountingbook.refpk)
                        }
                        type === 'end' && (queryCondition.includeAdj = 'Y');
                        return queryCondition;
                    }}
                    onChange={(v)=>{
                        accountPeriodChange(self, type, v)
                    }}
                />
            </div>
		)
    }
    render(){
        let {
            selectionState, start, end, enddate,showRadio,
            pk_accperiodscheme, rangeDate, handleValueChange,
            handleDateChange, self, showPeriod, showDate, pk_accountingbook,colLabelConfig,colInputConfig,allFullFlag
        } = this.props;
        let tempColNum = showRadio ? 24 : 18;
        let tempWrapperColNum = showRadio ? 18 : 24;
        let PickerClientColNum=allFullFlag?24:11;
        return(
            <Row className={`nc-theme-area-bgc nc-theme-area-split-bc ${showPeriod ? 'dateGroupContainer1' : 'dateGroupContainer'} `}>
                <Col {...voucherHeightConfig.fourCol} style={{ display: !showRadio ? 'none' : '' }} className='date-radio-wraper'>
                    <Radio.NCRadioGroup
                        // style={{display: !showRadio ? 'none' : '', width: '126px'}} //, marginTop: '6px'
                        // className='dateRadioGroup really'
                        selectedValue={selectionState}
                        onChange={(value) => handleValueChange('selectionState', value)}
                    >
                        {/* <Row className='accountRadioRow'> className='accountantRadio'*/}
                        <Radio value='true'  style={radioStyle_28} fieldid={this.state.json['dategroup-000000']}>{this.state.json['dategroup-000000']}</Radio>
                        {/* </Row> */}

                        {/* <Row className='dateRadioRow'> className='dateRadio' */}
                        <Radio value="false" style={radioStyle_28} fieldid={this.state.json['dategroup-000001']}>{this.state.json['dategroup-000001']}</Radio>
                        {/* </Row> */}

                    </Radio.NCRadioGroup>
                </Col>
                <Col {...voucherHeightConfig.fourCol}  style={{ display: !showRadio ? '' : 'none' }}>
                    <div className='period-date-wraper'>
                        <div className='date-group-row' style={{ display: !showPeriod ? '' : 'none' }}>
                            <FormLabel labelname={this.state.json['dategroup-000000']} />{/* 国际化处理： 会计期间*/}
                        </div>
                        <div className={`date-group-row ${showPeriod ? '' : 'row-margin'}`}> 
                            <FormLabel labelname={this.state.json['dategroup-000001']} />{/* 国际化处理： 日期*/}
                        </div>
                    </div>
                </Col>
                <Col {...voucherHeightConfig.twentyCol} >
                    <div className='period-date-wraper'>
                        <div className='date-group-row' style={{ display: !showPeriod ? '' : 'none' }}>
                            {this.renderPeriodRefer('start')}
                            {renderMiddleTxt()}
                            {this.renderPeriodRefer('end')}
                        </div>
                        <div className={`date-group-row ${showPeriod ? '' : 'row-margin'}`}>
                            <div className={`${allFullFlag ? 'comp-width-all' : 'comp-width'}`}>
                                <NCRangePickerClient // RangePicker
                                    disabled={selectionState === 'true' ? true : false}
                                    fieldid='rangeDate'
                                    format={format}
                                    showOk={true}
                                    className="dateRangeDiv"
                                    value={rangeDate}
                                    onChange={(value) => handleDateChange(value)}
                                />
                            </div>
                        </div>
                    </div>
                </Col>
                {/* <Col md={tempWrapperColNum} sm={tempWrapperColNum} >
                    <Row
                        className={`${showRadio ? 'accountRow' : 'noPositionDateRow'}`} //row-margin 
                        style={{ display: !showPeriod ? '' : 'none' }}
                    >
                        <Col {...voucherHeightConfig.fourCol} className='gl-lineHeight-manageReport' style={{ display: !showRadio ? '' : 'none' }}>
                            <FormLabel labelname={this.state.json['dategroup-000000']} />
                        </Col>
                        <Col md={tempColNum} sm={tempColNum} className='gl-lineHeight-manageReport'>
                            {this.renderPeriodRefer('start')}
                            {renderMiddleTxt()}
                            {this.renderPeriodRefer('end')}
                        </Col>
                    </Row>

                    <Row
                        className={`row-margin ${showRadio ? 'dateRow' : 'noPositionDateRowDate'}`}
                        style={{ display: !showDate ? '' : 'none' }}
                    >
                        <Col {...voucherHeightConfig.fourCol} className='gl-lineHeight-manageReport' {...colLabelConfig} style={{ display: !showRadio ? '' : 'none' }}>
                            <FormLabel labelname={this.state.json['dategroup-000001']} />
                        </Col>
                        <Col md={tempColNum} sm={tempColNum} {...colInputConfig} >
                            <Col gl={PickerClientColNum} xs={PickerClientColNum} md={PickerClientColNum} >
                                <NCRangePickerClient // RangePicker
                                    disabled={selectionState === 'true' ? true : false}
                                    fieldid='rangeDate'
                                    format={format}
                                    showOk={true}
                                    className="dateRangeDiv"
                                    value={rangeDate}
                                    onChange={(value) => handleDateChange(value)}
                                />
                            </Col>
                        </Col>
                    </Row>
                </Col> */}
            </Row>
        )
    }
}

export default DateGroup

/*sAWc/+o89mfVHRcNAsUTUk3nvOgSXdiDeTIvkujo5jTQnguuhOFG5GuVbuibWzlV*/